<template>
	<view class="container">
		<view class="fix">
			<view class="item">
				<view class="label">问题描述</view>
				<view class="textarea">{{ FormData.detail }}</view>
			</view>
			<view class="item" v-if="image.length > 0">
				<view class="label">照片</view>
				<view class="imglist">
					<view class="image" v-for="(item, index) in image" :key="index">
						<image :src="item" mode="aspectFill" @click="viewImg(index)"></image>
					</view>
				</view>
			</view>
			<button class="button" type="warn" @click="del">删 除</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num: 0,
			FormData: {
				detail: '',
				img: ''
			},
			image: []
		};
	},
	onLoad(e) {
		this.FormData.detail = e.detail;
	},
	methods: {
		onChange(e) {
			this.num = e.detail.value.length;
		},
		changeImg(e) {
			this.FormData.img = e.join(',');
		},
		viewImg(index) {
			const _this = this;
			uni.previewImage({
				current: index,
				urls: _this.image
			});
		},
		del() {
			console.log(this.FormData);
		}
	}
};
</script>

<style lang="scss">
.container {
	padding: 20rpx 40rpx;
	.fix {
		.item {
			margin-bottom: 20rpx;
			.label {
				font-size: 28rpx;
				padding: 10rpx 0 20rpx;
			}
			.textarea {
				box-sizing: border-box;
				width: 100%;
				height: 380rpx;
				background: #fff;
				border-radius: 20rpx;
				box-shadow: $uni-shadow-base;
				padding: 20rpx;
				font-size: 28rpx;
				line-height: 1.6;
			}
			.imglist {
				display: flex;
				flex-wrap: wrap;
				.image {
					box-sizing: border-box;
					width: 210rpx;
					height: 210rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border: 1rpx solid #eee;
					border-radius: 6rpx;
					position: relative;
					background: #fff;
					box-shadow: $uni-shadow-base;
					image {
						width: 210rpx;
						height: 210rpx;
					}
					&:nth-of-type(3n) {
						margin-right: 0;
					}
				}
			}
		}
		.button {
			margin-top: 100rpx;
		}
	}
}
</style>
